<template>
    <div id="app">
        <m-header></m-header>
        <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
            <el-tab-pane label="推荐" name="first"></el-tab-pane>
            <el-tab-pane label="歌手" name="second"></el-tab-pane>
            <el-tab-pane label="排行" name="third"></el-tab-pane>
            <el-tab-pane label="搜索" name="fourth"></el-tab-pane>
        </el-tabs>
        <keep-alive>
            <router-view/>
        </keep-alive>
        <user-login></user-login>
    </div>
</template>
<script>
  import MHeader from "./components/m-header";
  import UserLogin from "./components/login";

  export default {
    components: {
      MHeader,
      UserLogin
    },
    data() {
      return {
        activeName: "first"
      };
    },
    methods: {
      handleClick(tab, event) {
        switch (tab.name) {
          case "first" :
            this.$router.push({ name: "recommend" });
            break;
          case "second" :
            this.$router.push({ name: "singers" });
            break;
          case "third" :
            this.$router.push({ name: "rank" });
            break;
          case "fourth" :
            this.$router.push({ name: "search" });
            break;
        }
      }
    }
  };
</script>
<style lang="scss">
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
    .el-loading-mask{
        background: rgba(255,255,255,.4);
    }
</style>
